<template>
  <el-dialog
    :title="!dataForm.id ? $t('brand.add') : $t('user.editBtn')"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @closed="closeDialog"
    width="50%"
  >
    <el-form
      @submit.native.prevent
      class="dialog-form"
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      :label-width="this.$i18n.t('language') === 'English' ? '150px' : '80px'"
    >
      <el-form-item label="起点" prop="fromId">
        <el-select
          size="mini"
          v-model="dataForm.fromId"
          placeholder="请选择起点"
        >
          <el-option
            v-for="item in polygonAreas"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-button
          class="el-icon-map-location"
          type="primary"
          @click="selectMap('fromId')"
          size="mini"
          >地图选择</el-button
        >
      </el-form-item>

      <el-form-item label="终点" prop="toId">
        <el-select size="mini" v-model="dataForm.toId" placeholder="请选择终点">
          <el-option
            v-for="item in polygonAreas"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-button
          class="el-icon-map-location"
          type="primary"
          @click="selectMap('toId')"
          size="mini"
          >地图选择</el-button
        >
      </el-form-item>

      <el-form-item label="途径点" prop="essentialPoint">
        <div>
          <div v-for="(point, index) in necPoints" :key="index">
            <el-tag>
              途径点{{ index + 1 }} : [{{ point.x }},{{ point.y }},{{
                point.level
              }}]
            </el-tag>
          </div>
        </div>
        <el-button
          class="el-icon-map-location"
          type="primary"
          @click="selectMap('essentialPoint')"
          size="mini"
          >选择途径点</el-button
        >
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <div class="default-btn" @click="visible = false">
        {{ $t("remindPop.cancel") }}
      </div>
      <div class="default-btn primary-btn" @click="dataFormSubmit()">
        {{ $t("remindPop.confirm") }}
      </div>
    </span>

    <el-dialog
      width="90%"
      :visible.sync="innerVisible"
      top="5vh"
      @close="innerClose"
      append-to-body
    >
      <div slot="title" class="dialog-title" v-if="iframeMapLoaded">
        <template v-if="curUseKey == 'fromId' || curUseKey == 'toId'">
          <h3 class="title-h3">区域名称</h3>
          <el-select
            size="mini"
            v-model="selectedArea.id"
            @change="handleSelect"
            placeholder="请选择区域"
          >
            <el-option
              v-for="item in polygonAreas"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </template>
        <template v-if="curUseKey == 'essentialPoint'">
          <h3
            class="title-h3"
            v-if="this.dataForm.fromId && this.dataForm.toId"
          >
            请选择 {{ mapLabelById(this.dataForm.fromId) }} 到
            {{ mapLabelById(this.dataForm.toId) }} 的必经点
          </h3>
        </template>
      </div>
      <iframe
        class="iframe"
        :src="
          curUseKey == 'fromId' || curUseKey == 'toId'
            ? './fengMap/settingNecessaryPointAreaMap.html'
            : './fengMap/markNecessaryPointAreaMap.html'
        "
        ref="SettingNecessaryPointAreaMap"
      ></iframe>

      <span slot="footer" class="dialog-footer">
        <div class="default-btn" @click="innerVisible = false">
          {{ $t("remindPop.cancel") }}
        </div>
        <div class="default-btn primary-btn" @click="confirmSelect">
          {{ $t("remindPop.confirm") }}
        </div>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    var validateTitle = (rule, value, callback) => {
      if (String(value).trim() === "") {
        callback(new Error(this.$i18n.t("shop.tagNameNotNull")));
      } else {
        callback();
      }
    };
    return {
      visible: false,
      innerVisible: false,
      polygonAreas: [],
      selectedArea: {},
      id: 0,
      dataForm: {},
      curUseKey: "",
      iframeMapLoaded: false,
      necPoints: [],
      dataRule: {},
    };
  },
  components: {},
  mounted() {},
  methods: {
    mapLabelById(id) {
      if (id) {
        let item = this.polygonAreas.find((area) => area.id == id);
        return item && item.name ? item.name : "";
      } else {
        return "";
      }
    },
    confirmSelect() {
      if (this.curUseKey) {
        if (this.curUseKey == "essentialPoint") {
          if (!this.necPoints.length) {
            this.$message.warning("请选择必经点");
            return;
          }
          this.$set(
            this.dataForm,
            "essentialPoint",
            JSON.stringify(this.necPoints)
          );
        } else {
          this.$set(this.dataForm, this.curUseKey, this.selectedArea.id);
        }
      }
      this.innerVisible = false;
    },
    selectMap(key) {
      if (key == "essentialPoint") {
        if (!this.dataForm.fromId || !this.dataForm.toId) {
          this.$message.warning("请先选择起点区域和终点区域");
          return;
        }
      }
      this.curUseKey = key;
      this.innerVisible = true;
      this.$nextTick(() => {
        this.$refs.SettingNecessaryPointAreaMap.onload = () => {
          this.$refs.SettingNecessaryPointAreaMap.contentWindow.$parent_this =
            this;
          this.$refs.SettingNecessaryPointAreaMap.contentWindow.disableEdit();
        };
      });
    },
    init(item) {
      this.dataForm = item;
      this.visible = true;
      this.curUseKey = "";
      this.iframeMapLoaded = false;
      this.necPoints = [];
      if (item.id) {
        let essentialPoint = JSON.parse(item.essentialPoint);
        this.necPoints = essentialPoint.sort((a, b) => a._timer - b._timer);
      }
      this.getAreaList();
    },
    getAreaList() {
      this.$http({
        url: this.$http.adornUrl("/platform/essential/airportAreaList"),
        method: "get",
      }).then((res) => {
        this.polygonAreas = res.data;
      });
    },
    // 提交
    dataFormSubmit() {
      console.log(this.dataForm);

      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        this.$http({
          url: this.$http.adornUrl("/platform/essential/updateEssential"),
          method: "post",
          data: this.$http.adornData({
            ...this.dataForm,
          }),
        }).then(() => {
          this.$message({
            message: this.$i18n.t("outlet.success"),
            type: "success",
          });
          this.visible = false;
        });
      });
    },
    handleSelect(e) {
      console.log(e);
      let selectedArea = this.polygonAreas.find((area) => area.id == e);
      this.$refs.SettingNecessaryPointAreaMap.contentWindow.mapCameraMove(
        selectedArea
      );
    },
    closeDialog() {
      this.$emit("refreshChange");
      this.$refs.dataForm.resetFields();
      this.id = "";
    },
    innerClose() {
      this.curUseKey = "";
      this.selectedArea = {};
      this.iframeMapLoaded = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-icon-map-location {
  margin-left: 12px;
}
.iframe {
  height: 70vh;
  width: 100%;
}

.dialog-title {
  display: flex;
  align-items: center;
  .title-h3 {
    margin-right: 10px;
  }
}
</style>
